<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:c="http://www.w3.org/1999/XSL/Transform">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
</head>
<body>
    <div th:replace="common/IncludeTop">
    </div>

    <div id="Content">
        <div id="BackLink">
            <a href="/catalog/viewAdminmain">Return to Main Menu</a>
        </div>

        <form action="/adminCatalog/addItem" method="post">
            <table align="center">
                <caption>ADD ITEM</caption>
                <tr>
                    <th>Item ID</th>
                    <td><input type="text" name="itemId"></td>
                </tr>
                <tr>
                    <th>Product ID</th>
                    <td>
                        <div th:switch="${haveProduct}">
                            <select th:case="false" name="productId">
                                <option th:each="productId:${productList}"
                                            th:value="${productId}"
                                            th:text="${productId}">
                                </option>
                            </select>
                            <input th:case="true" type="text" th:value="${productId}"o name="productId" readonly>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th>List Price</th>
                    <td><input type="text" name="listPrice" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g,'$1')"></td>
                </tr>
                <tr>
                    <th>Supplier</th>
                    <td><input type="number" name="supplier"></td>
                </tr>
                <tr>
                    <th>Describe</th>
                    <td>
                        <input type="text" name="attr1"><br>
                        <input type="text" name="attr2"><br>
                        <input type="text" name="attr3"><br>
                        <input type="text" name="attr4">
                    </td>
                </tr>
                <tr>
                    <th>Quantity</th>
                    <td>
                        <input type="number" name="qty"></td>
                    </td>
                </tr>
            </table>

            <input th:type="submit" th:value="'Add This Item'" th:id="submit" >
        </form>
    </div>

    <div th:replace="common/IncludeBottom">
    </div>
</div>
</body>
</html>